<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="../plugins/vue.js"></script>
    <script src="../plugins/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../show//css/register.css" />
    <!--axios-->
    <script src="../plugins/axios-0.18.0.js"></script>
</head>
<body>
<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span>
        <a href="login.html">登录</a>
    </div>
    <el-form  ref="registerForm":model="form" id="reg-form">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <el-input v-model="form.username" name="username" type="text" id="username" prop="username"></el-input>
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <el-input v-model="form.password" name="password" type="password" id="password" prop="password"></el-input>
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
        </table>
        <div class="buttons">
            <el-button type="submit" id="reg_btn" @click.native.preven="register()">
                <span >注册</span>
            </el-button>
        </div>
        <br class="clear">
    </el-form>
</div>
</body>
<script>
    new Vue({
        el: "#reg-form",
        props: {
            msg: String
        },
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            register() {
                var that = this;
                var username = that.form.username;
                var password = that.form.password;
                console.log(that.form)
                axios.post("/user/register",that.form,{
                        headers: {
                            "Content-Type": "application/json" // 根据服务器要求的格式设置正确的Content-Type
                        }}
                ).then(function (response) {
                        console.log(response)
                        // 处理注册成功的逻辑
                        alert("注册成功！");
                        console.log('success register!!');
                    })
                    .catch(function (error) {
                        // 处理注册失败的逻辑
                        alert("注册失败！");
                        console.log('error register!!');
                        return false;
                    });
            }
        }
    })
</script>
</html>